<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="${request.contextPath}/"/>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
    <title>在线办证</title>
    <link href="Content/wechat/css/reset.css" rel="stylesheet" type="text/css">
    <!--签到-->
    <link href="Content/wechat/css/dangJian_gongZhuGongJian_CJHD.css" rel="stylesheet" type="text/css">

    <script src="Content/wechat/js/jquery.min.js"></script>
    <!--字体缩放-->
    <script src="Content/wechat/js/ziti.js"></script>
    <!--end 字体缩放-->
    <!--上传图片js-->
    <script src="Content/wechat/js/svg.js"></script>
    <!--end 上传图片js-->
    <script src="Content/wechat/js/jquery.validate.js"></script>
    <!--微信 上传图片js-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '${jsApiConfig.appId!}', // 必填，公众号的唯一标识
            timestamp: ${jsApiConfig.timestamp!}, // 必填，生成签名的时间戳
            nonceStr: '${jsApiConfig.nonceStr!}', // 必填，生成签名的随机串
            signature: '${jsApiConfig.signature!}',// 必填，签名
            jsApiList: ['chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
        });

    </script>
</head>
<body>
<header>
    <img src="Content/wechat/images/zxbl.png">
</header>
<form id="form1">
    <div class="xinyuan">
        <div class="xinyuan_box">
            <dl class="clearfix">
                <dt>所属社区</dt>
                <dd><select id="communityid" name="communityid">
                    <option value="">---请选择---</option>
                </select>
                </dd>
            </dl>

            <dl class="clearfix">
                <dt>证明类型</dt>
                <dd><select name="type" id="type" onchange="typeChange(this.value)">
                    <option value="">---请选择---</option>
                    <option value="亲属关系证明">亲属关系证明</option>
                    <option value="低保证明">低保证明</option>
                    <option value="居住证明">居住证明</option>
                </select>
                </dd>
            </dl>
            <dl class="clearfix">
                <dt>姓名</dt>
                <dd>
                    <input class="text" type="text" name="name" id="name" placeholder="请输入姓名">
                </dd>
            </dl>
            <dl class="clearfix">
                <dt>电话</dt>
                <dd>
                    <input class="text" type="text" name="phone" id="phone" placeholder="请输入电话名">
                </dd>
            </dl>
            <dl class="clearfix">
                <dt>身份证号</dt>
                <dd>
                    <input class="text" type="text" name="idnum" id="idnum" placeholder="请输入身份证号">
                </dd>
            </dl>
            <dl class="clearfix">
                <dt>现居住地</dt>
                <dd>
                    <input class="text" type="text" name="address" id="address" placeholder="请输入现居住地">
                </dd>
            </dl>
            <h4>该证明需要上传以下信息及照片：</h4>
            <center><span style="color: black;font-size: 0.3rem" id="typeInfo">请选择证明类型</span></center>
            <h4>提供办证信息内容：</h4>
            <textarea class="textarea" id="cardinfo" name="cardinfo" placeholder="请填写提供办证信息内容"></textarea>
            <!--上传多张图片-->
            <!--上传多张图片-->
            <section>
                <p class="red">上传办证需要图片*（非必选）可以选择上传图片，最多8张</p>
                <article>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>

                    <div style="clear: left;"></div>
                </article>
            </section>


        </div>
        <div class="button_shangChuan" id="btnAdd">确定</div>
    </div>
</form>
</body>
<SCRIPT>
    var community =${community!};
    if (community != null) {
        $.each(community, function (index, items) {
            $("#communityid").append("<option id='" + items.id + "'>" + items.communityname + "</option>");
        });

    }

    function typeChange(typeval) {
        if (typeval != null && typeval == "亲属关系证明") {
            $("#typeInfo").html("<p>1.身份证</p><p>2.户口</p><p>3.相关证明材料</p>");
        } else if (typeval != null && typeval == "低保证明") {
            $("#typeInfo").html("<p>1.身份证、户口本</p><p>2.低保折</p><p>3.低保享受人信息</p>");
        } else if (typeval != null && typeval == "居住证明") {
            $("#typeInfo").html("<p>1.身份证、户口本</p><p>2.房照或租房合同(必须有相关缴费证明)</p><p>3.低保享受人信息</p>");
        }
    }

    var btnAdd = true;
    // 预览
    var loadImg = function (obj) {
        preview(obj);
    }
    // 删除
    var deleteImg = function (obj) {
        $(obj).parent().find('input').val('');
        $(obj).parent().find('.preview').html('');
        $(obj).hide();
    }

    // 预览
    function preview(obj) {
        var prevDiv = $(obj).parent().find('.preview');
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图
                prevDiv.html('<img src="' + localIds + '" />');
                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        $(obj).parent().find('.delete').show();
                        $(obj).parent().find("input[name='uploadImgUrls']").val(res.serverId);
                    }
                });
            }
        });
    }

    $().ready(function () {
        $(".button_shangChuan").click(function () {
                if (!btnAdd) {
                    alert("提交中...");
                    return;
                }
                if ($("#form1").valid()) {
                    btnAdd = false;
                    $("#btnAdd").html("提交中...")
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/wechat/home/card/data/card_ZXBZ_add",//url
                        data: $('#form1').serialize(),
                        success: function (result) {
                            console.log(result);//打印服务端返回的数据(调试用)
                            if (result.code == 200) {
                                alert(result.info);
                                location.reload();
                            } else {
                                alert("请稍后再试");
                                btnAdd = true;
                                $("#btnAdd").html("确定");
                            }
                        },
                        error: function () {
                            alert("异常！");
                            btnAdd = true;
                            $("#btnAdd").html("确定");
                        }
                    });
                }
            }
        );
        $("#form1").validate({
            rules: {
                communityid: {
                    required: true,
                },
                type: {
                    required: true,
                }
                ,
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 5,
                }, phone: {
                    required: true,
                    isPhoneNum: true,
                }, idnum: {
                    required: true,
                    Validateidnum: true,

                }, address: {
                    required: true,

                }

            },
            messages: {
                communityid: {}, type: {}, name: {
                    minlength: "(字符不能少于 2 个且不能大于 5个)",
                    maxlength: "(字符不能少于2 个且不能大于 5个)",
                }, phone: {}, idnum: {}, address: {}
            }


        })
        jQuery.validator.addMethod("Validateoverday", function (value, element) {
            return this.optional(element) || (/^[1-9]\d*$/.test(value));
        }, "请输入正整数");
        jQuery.validator.addMethod("Validateidnum", function (value, element) {
            if (value.length != 18) {
                return false;
            }
            return true;
        }, "请输入正确的身份证号");
        jQuery.validator.addMethod("isPhoneNum", function (value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
    });

</SCRIPT>

</html>
